<template>
	<div class="opened">
		<list-title :data="header"></list-title>
		<list-table :list="instanceList" :tableLoading="tableLoading" :footer="false">
			<template v-slot:data>
				<el-table-column prop="app_name" label="应用名称"></el-table-column>
				<el-table-column prop="appid" label="APPID"></el-table-column>
				<el-table-column prop="appname" label="应用类型"></el-table-column>
				<el-table-column prop="state" label="状态" width="50px">
					<template slot-scope="scope">
						<span v-if='scope.row.state == 0'>正常</span>
						<span v-if='scope.row.state == 1'>到期</span>
						<span v-if='scope.row.state == 2'>暂时关闭</span>
					</template>
				</el-table-column>
				<el-table-column prop="expire_time" label="到期时间" width="150px"></el-table-column>
				<el-table-column prop="add_time" label="开通时间" width="150px"></el-table-column>
				<el-table-column label="操作" width="150">
					<!-- <template slot-scope="scope">
					</template> -->
					<template slot-scope="scope">
						<!-- <el-button type='text' size="mini">续费</el-button> -->
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"

export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '已开通应用',
				reload: true,
			},
			/*列表数据*/
			instanceList: [
				// {
				// 	opened_id: 1,
				// 	app_name: '应用名称',
				// 	describe: '描述',
				// 	appid: '',
				// 	appname: '',//应用名称
				// 	appsecret: '',
				// 	state: '',
				// 	close_reason: '',
				// 	expire_time: '',
				// 	add_time: '',
				// },
			],
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*获取列表数据*/
		this.getInstanceList()
	},
	methods: {
		/*获取列表数据*/
		getInstanceList: function(){
			if(this.$api.openList != undefined){
				this.$baseURL(this.$domain.ac)
				this.$get(this.$api.openList).then(res => {
					// console.log(res);
					// if(res.data.code == 10007){//后台提示需要登录
					// 	this.$cookie.remove('isLogin');//刪除cookie登录信息
					// 	this.reload();
					// }
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.instanceList = []
							Object.keys(res.data.data).forEach((k) => {
								this.instanceList.push ({
									opened_id: res.data.data[k].opened_id,
									app_name: res.data.data[k].app_name,
									describe: res.data.data[k].describe,
									appid: res.data.data[k].appid,
									appname: res.data.data[k].appname,
									appsecret: res.data.data[k].appsecret,
									state: res.data.data[k].state,
									close_reason: res.data.data[k].close_reason,
									expire_time: res.data.data[k].expire_time,
									add_time: res.data.data[k].add_time,
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
	},
    computed: {
    	
    }
};
</script>

<style lang="stylus" scoped>
</style>